checkLogin()
woZhenShuai()

// 渲染数据
async function renderStudent() {
    // 获取数据
    const result = await axios.get('/students')
    const data = result.data.data
    // 渲染数据
    document.querySelector('.list').innerHTML = data.map(item => {
        return `
        <tr>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.gender ? '女' : '男'}</td>
            <td>第${item.group}组</td>
            <td>${item.hope_salary}</td>
            <td>${item.salary}</td>
            <td>${item.province}${item.city}${item.area}</td>
            <td>
                <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
                <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
            </td>
        </tr>
    `
    }).join('')
    // 渲染总人数
    document.querySelector('.total').innerHTML = data.length
}
renderStudent()

// 创建modal实例 ----------
const myModal = new bootstrap.Modal(document.querySelector('#modal'))

// 请求省份列表
async function randerProvince() {
    // 请求省份列表 ---------
    const provinceRes = await axios({
        url: '/api/province'
    })
    const shengList = provinceRes.data.list
    // 渲染省份列表
    document.querySelector('[name="province"]').innerHTML = '<option value="">省份</option>' + shengList.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')
}
randerProvince()

// 打开弹窗函数
// flag 1是添加弹窗 0是编辑弹窗 编辑要传入当前项的id值
async function operate(flag = 1, id) {
    // 渲染标题
    document.querySelector('.modal-title').innerHTML = flag ? '添加马喽' : '修改马喽'
    // 判断点击提交逻辑
    document.querySelector('#submit').dataset.flag = flag

    // 判断是否回显数据 ---------
    if (!flag) {
        // 回显  --- async函数返回的是一个promise对象 所以可以用await 让他原地等待成功的结果后  再开启弹窗
        await echo(id)
    } else {
        document.querySelector('#form').reset()
    }

    // 显示
    myModal.show()
}

// 回显城市地区函数
async function randerCity(cityValue, areaValue) {
    // 请求城市列表 -----------------------------
    const cityRes = await axios({
        url: '/api/city',
        params: {
            pname: document.querySelector('[name="province"]').value
        }
    })
    const cityList = cityRes.data.list
    // 渲染城市列表
    document.querySelector('[name="city"]').innerHTML = '<option value="">城市</option>' + cityList.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    // 回显当前城市
    document.querySelector('[name="city"]').value = cityValue

    // 请求地区列表 -------------------------
    const areaRes = await axios({
        url: '/api/area',
        params: {
            pname: document.querySelector('.province').value,
            cname: document.querySelector('.city').value
        }
    })
    const areaList = areaRes.data.list
    // 渲染地区列表
    document.querySelector('[name="area"]').innerHTML = '<option value="">地区</option>' + areaList.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    // 回显当前地区
    document.querySelector('[name="area"]').value = areaValue
}

// 回显函数 需要传入id
async function echo(id) {
    // 给提交按钮添加ID
    document.querySelector('#submit').dataset.id = id

    // 请求点击编辑的学生数据
    const result = await axios({
        url: `/students/${id}`
    })
    const data = result.data.data

    // 暂存城市变量 ----------
    let cityValue = ''
    // 暂存地区变量
    let areaValue = ''

    // 回显基本数据
    Object.keys(data).forEach(item => {
        if (item == 'gender') {
            // 性别
            document.querySelector(`#cb0${data[item] + 1}`).checked = true
        } else if (item == 'createdAt' || item == 'id' || item == 'updatedAt' || item == 'user_id') {
            // 不需要回显的数据
        } else if (item == 'city') {
            // 暂存城市value值
            cityValue = data[item]
        } else if (item == 'area') {
            // 暂存地区value值
            areaValue = data[item]
        } else {
            // 回显其他数据
            document.querySelector(`.${item}`).value = data[item]
        }
    })

    // 回显城市地区 --- async函数返回的是一个promise对象 所以可以用await 让他原地等待成功的结果
    await randerCity(cityValue, areaValue)
}



// 监听省份表单变化 请求城市列表
document.querySelector('.province').addEventListener('change', async function () {
    const cityData = await axios({
        url: '/api/city',
        params: {
            pname: this.value
        }
    })
    const cityList = cityData.data.list
    document.querySelector('.city').innerHTML = '<option value="">城市</option>' + cityList.map(item => {
        return `<option value="${item}">${item}</option>`
    })
    document.querySelector('.area').innerHTML = '<option value="">地区</option>'
})

// 监听城市列表变化 请求地区列表 
document.querySelector('.city').addEventListener('change', async function () {
    const areaData = await axios({
        url: '/api/area',
        params: {
            pname: document.querySelector('.province').value,
            cname: document.querySelector('.city').value
        }
    })
    const areaList = areaData.data.list
    document.querySelector('.area').innerHTML = `<option value="">地区</option>` + areaList.map(item => {
        return `<option value="${item}">${item}</option>`
    })
})

// 新增开启弹窗
document.querySelector('#openModal').addEventListener('click', function () {
    operate(1)
})

// 编辑开启弹窗
document.querySelector('.list').addEventListener('click', function (e) {
    if (e.target.classList.contains('bi-pen')) {
        operate(0, e.target.dataset.id)
    }
})

// 提交弹框逻辑
document.querySelector('#submit').addEventListener('click', async e => {
    e.preventDefault()
    if (e.target.dataset.flag == 1) {
        // 添加弹框逻辑--------------------------
        const data = verifyPlus()
        // 判断是否验证成功
        if (data) {
            // 请求数据
            const res = await axios({
                url: '/students',
                method: 'POST',
                data
            })
            const txt = res.data.message
            alertMsg(txt)
            // 渲染关闭弹窗
            renderStudent()
            myModal.hide()
        }
    } else if (e.target.dataset.flag == 0) {
        // 编辑弹框逻辑-----------------------------
        const data = verifyPlus()
        // 判断是否验证成功
        if (data) {
            // 请求数据
            const res = await axios({
                url: `/students/${e.target.dataset.id}`,
                method: 'PUT',
                data
            })
            const txt = res.data.message
            alertMsg(txt)
            // 渲染关闭弹窗
            renderStudent()
            myModal.hide()
        }
    }
})

// 校验函数
function verify(verifyStr, ele) {
    if (!verifyStr.test(ele.value)) {
        alertMsg('请按照提示输入正确的内容', false)
        return false
    } else {
        return true
    }
}

// 校验终极函数
function verifyPlus() {
    // 获取弹框数据
    const data = serialize(document.querySelector('#form'), { hash: true, empty: true })
    // 校验弹框数据
    let vi = []
    if (Object.values(data).some(item => item.trim() === '')) {
        alertMsg('不能输入空的内容，混蛋', false)
        vi.push(false)
    } else {
        Object.keys(data).forEach(item => {
            if (item == 'name') {
                const fl = verify(/^(?:[\u4e00-\u9fa5·]{2,16})$/, document.querySelector(`.${item}`))
                vi.push(fl)
                return
            } else if (item == 'group') {
                const fl = verify(/^[1-8]$/, document.querySelector(`.${item}`))
                vi.push(fl)
                data[item] = parseInt(data[item])
                return
            } else if (item == 'age' || item == 'hope_salary' || item == 'salary') {
                const fl = verify(/^\d+$/, document.querySelector(`.${item}`))
                vi.push(fl)
                data[item] = parseInt(data[item])
                return
            } else if (item == 'gender') {
                data[item] = parseInt(data[item])
                return
            } else {
                return
            }
        })
    }
    // 返回数据
    if (vi.every(item => item)) {
        return data
    } else {
        return false
    }
}

// 删除逻辑
document.querySelector('.list').addEventListener('click', async function (e) {
    if (e.target.classList.contains('bi-trash')) {
        const res = await axios({
            url: `/students/${e.target.dataset.id}`,
            method: 'DELETE'
        })
        alertMsg('删除成功')
        renderStudent()
    }
})